<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>我的视频</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style>
			html,
			body {
				margin: 0px;
				padding: 0px;
			}
			
			.clerarfix:after {
				display: table;
				content: "";
				clear: both;
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.mevideo {
				margin-top: 1rem;
				height: 8rem;
				background: white;
				width: 100%;
			}
			
			.mevideo_img {
				margin-left: 0.5rem;
				height: 8rem;
				width: 9rem;
			}
			
			.mevideo_img1 {
				background: url(imges/shipin1.png)no-repeat center center;
				background-size: 100%;
			}
			
			.mevideo_img2 {
				background: url(imges/shipin2.png)no-repeat center center;
				background-size: 100%;
			}
			
			.mevideo_img3 {
				background: url(imges/shipin3.png)no-repeat center center;
				background-size: 100%;
			}
			
			.mevideo_img4 {
				background: url(imges/shipin4.png)no-repeat center center;
				background-size: 100%;
			}
			
			.mevideo_cent {
				width: 8rem;
				height: 8rem;
				/*background:red;*/
				padding-left: 1rem;
				padding-top: 1.6rem;
				/* background:red; */
			}
			
			/ .mevideo_cent div:nth-of-type(1) {
				font-weight: 700;
			}
			
			.mevideo_cent div:nth-of-type(2) {
				margin-top: 0.5rem;
			}
			
			.mevideo_cent div:first-child~div {
				font-size: 0.7rem;
				color: #9c9c9c;
			}
			
			.mevideo:last-child {
				display: none;
			}
			
			.footer {
				margin-top: 0.8rem;
				width: 100%;
				height: 1.5rem;
				background: white;
				text-align: center;
				line-height: 1.5rem;
			}
		</style>
	</head>

	<body>
		<div class="page-group">
			<div class="page page-current">
				<!-- 你的html代码 -->
				<header class="bar bar-nav" style="background:#009eff">
					<a class="button button-link button-nav pull-left back" style="color:white" href="我的.html">
						<span class="icon icon-left"></span> 返回
					</a>
					<!-- <a class="button button-link button-nav pull-left" href="我的.html" data-transition='slide-out'>
                  <span class="icon icon-left"></span>
                  返回
                </a> -->
					<h1 class="title" style="color:white">我的视频</h1>
				</header>
				<div class="content">
					<!-- 这里是页面内容区 -->
					<div class="mevideo clearfix">
						<div class="mevideo_img fl mevideo_img1"></div>
						<div class="mevideo_cent fl">
							<div>主讲人:百玉</div>
							<div>2018-03-03 08:30</div>
							<div>百玉老师教你</div>
							<div>如何解决偏科问题</div>
						</div>
					</div>

					<div class="mevideo clearfix">
						<div class="mevideo_img fl mevideo_img2"></div>
						<div class="mevideo_cent fl">
							<div>主讲人:霍思研</div>
							<div>2018-02-03 08:30</div>
							<div>简介:两堂课教你如何</div>
							<div>高考作文拿高分</div>
						</div>
					</div>
					<div class="mevideo clearfix ">
						<div class="mevideo_img fl mevideo_img3"></div>
						<div class="mevideo_cent fl">
							<div>主讲人:程优优</div>
							<div>2018-01-03 08:30</div>
							<div>简介:直击高考重难点</div>
							<div>把握成功秘诀</div>
						</div>
					</div>
					<div class="footer">点击加载更多...</div>
					<div class="mevideo clearfix">
						<div class="mevideo_img fl mevideo_img4"></div>
						<div class="mevideo_cent fl">
							<div>主讲人:百玉</div>
							<div>2018-04-03 08:30</div>
							<div>简介:与宋老师一起</div>
							<div>体验中考名著魅力</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		</div>

		<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			$(start);

			function start() {
				$(".mevideo:gt(2)").hide();
				$(".footer").click(
					function() {
						$(".mevideo:gt(2)").show();
						$(this).hide();
					}
				)
			}
		</script>
	</body>

</html>